<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    :ellipsis="false"
    router
    @select="handleSelect"
  >
    <template v-if="isLogin">
      <el-menu-item index="PersonalCenter" style="color: red"
        >欢迎你，{{ userName }}</el-menu-item
      >
      <el-menu-item index="StoreMain" @click="loginOut" style="color: red"
        >注销</el-menu-item
      >
    </template>
    <template v-else>
      <el-menu-item index="login" style="color: red">亲，请登录</el-menu-item>
      <el-menu-item index="register">注册</el-menu-item>
    </template>
    <div class="flex-grow" />
    <el-menu-item v-for="(item,index) in headerList" :key="index" :index="item.url">{{item.name}}</el-menu-item>
    <!-- <el-menu-item index="PersonalCenter">个人中心</el-menu-item>
    <el-menu-item index="ShoppingCart">我的购物车</el-menu-item>
    <el-menu-item index="OrderCenter">订单中心</el-menu-item>
    <el-menu-item index="GoodsCategory">商品分类</el-menu-item>
    <el-menu-item index="ContactUs">联系客服</el-menu-item> -->
  </el-menu>
</template>

<script>
import { ref, computed } from "vue";
import { useStore } from "vuex";
import VueEvent from "@/js/mitt.js";
export default {
  name: "Header",
  setup() {
    const activeIndex = ref("StoreMain");
    const handleSelect = (key, keyPath) => {
      console.log(key, keyPath);
    };

    // 引入vuex
    const store = useStore();
    // 退出
    function loginOut() {
      store.dispatch("loginOut").then(() => {
        VueEvent.emit("isShow",0)
      });
    }
    // 头部导航
    const headerList = ref([
      { url: "StoreMain", name: "首页" },
      { url: "PersonalCenter", name: "个人中心" },
      { url: "ShoppingCart", name: "我的购物车" },
      { url: "OrderCenter", name: "订单中心" },
      { url: "GoodsCategory", name: "商品分类" },
      { url: "ContactUs", name: "联系客服" },
    ]);
    // 是否登录
    const isLogin = computed(() => {
      return store.state.userInfo.shopToken != null;
    });
    console.log(isLogin.value);
    // 用户账号
    const userName = computed(() => {
      return store.state.userInfo.info.username;
    });
    return {
      activeIndex,
      isLogin,
      userName,
      headerList,
      handleSelect,
      loginOut,
    };
  },
};
</script>

<style scoped lang="scss">
/* 修改element ui 样式*/
.el-menu-demo {
  height: 35px;
  background-color: rgba(203, 203, 203, 0.591);
  padding: 0 200px;
  // padding: 0 300px;
}
/* 整体的下划线进行隐藏 */
.el-menu.el-menu--horizontal {
  border-bottom: none;
}
.el-menu-item {
  line-height: 35px;
}
/* 点击出来的下划线进行隐藏 */
.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: #ebeef5 !important;
  color: red !important;
}
/* 点击出来的submenu下划线进行隐藏 */
::v-deep .el-submenu.is-active .el-submenu__title {
  border-bottom: #ebeef5 !important;
}
/* 点击以后的背景⾊进⾏隐藏 */
.el-menu--horizontal > .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
.el-menu--horizontal > .el-submenu .el-submenu__title:hover {
  background-color: rgba(0, 0, 0, 0);
  color: red !important;
}
span {
  line-height: 35px;
  color: red;
  font-size: 14px;
}

.flex-grow {
  flex-grow: 1;
}
</style>